<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="customerTelephone">
                <el-input v-model="searchForm.customerTelephone" clearable placeholder="用户手机号"></el-input>
            </el-form-item>
            <el-form-item prop="customerCode">
                <el-input v-model="searchForm.customerCode" clearable placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="customerNickname">
                <el-input v-model="searchForm.customerNickname" clearable placeholder="微信昵称"></el-input>
            </el-form-item>
            <el-form-item prop="tagIds">
              <el-select filterable clearable v-model="searchForm.tagIds" placeholder="用户标签">
                <el-option :label="item.name" :value="item.tagId" v-for="item in tagList"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="applyTime">
              <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="auditTime">
              <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.levelId" size="small" @change="handleSearch">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="searchForm.status" size="small" @change="handleSearch" style="margin-left:10px">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.dictValue" v-for="item in statusList">{{item.dictLabel}}</el-radio-button>
            </el-radio-group>
            <el-button type="primary" @click="handleAudit()" size="small"  icon="el-icon-document-checked" style="margin-left:10px" v-has="'audit:nameAttestationAudit:audit'">批量审核</el-button>

          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;" row-key="id" border :height="tableHeight" v-loading = "loading"
            @selection-change="handleSelectionChange"  stripe>
            <el-table-column type="selection" :selectable='checkboxSelect' width="55"></el-table-column>
            <el-table-column prop="customerId" label="编号" v-if="!hideTableColumn.includes('number')"></el-table-column>
            <el-table-column prop="logo" label="用户头像" v-if="!hideTableColumn.includes('img')" width="100">
              <template #default="scope">
                 <el-image :src="scope.row.logo | toImgFull" fit="fill" v-image-preview  class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="customerCode" label="用户名" v-if="!hideTableColumn.includes('userName')" align="center"></el-table-column>
            <el-table-column prop="customerNickname" label="微信昵称" v-if="!hideTableColumn.includes('wxNick')" align="center"></el-table-column>
            <el-table-column prop="customerTelephone" label="手机号" v-if="!hideTableColumn.includes('phone')" align="center"></el-table-column>
            <el-table-column prop="fullname" label="真实姓名" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
            <el-table-column prop="idcardNumber" label="身份证号" v-if="!hideTableColumn.includes('idCard')" align="center"></el-table-column>
            <el-table-column prop="levelName" label="会员等级" v-if="!hideTableColumn.includes('level')" align="center"></el-table-column>
            <el-table-column prop="name" label="标签" v-if="!hideTableColumn.includes('label')" align="center" >
              <template slot-scope="scope">
                <MyTableTag :tagList="scope.row.tagList"/>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="申请日期" v-if="!hideTableColumn.includes('auditTime')" align="center" width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.applyTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="employeName" label="审核人(电话)" v-if="!hideTableColumn.includes('auditPhone')" align="center"></el-table-column>
            <el-table-column prop="remark" label="审核备注" v-if="!hideTableColumn.includes('auditRemark')" show-overflow-tooltip width="250" align="center"></el-table-column>
            <el-table-column prop="name" label="状态" v-if="!hideTableColumn.includes('status')" align="center">
              <template slot-scope="scope">
                  <el-tag :type="scope.row.status=='1'?'primary':scope.row.status=='2'?'success':'warning'" >
                    {{scope.row.status=='1'?'待审核':scope.row.status=='2'?'已通过':'驳回'}}
                  </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="160" align="center" fixed="right">
              <template #default="scope">
                  <el-button
                  v-if="scope.row.status=='1'"
                    size="medium"
                    type="text"
                    icon="el-icon-document-checked"
                    @click="handleAudit(scope.row)"
                    v-has="'audit:nameAttestationAudit:auditOne'"
                  >审核</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-s-custom"
                    @click="handleAuthentication(scope.row)"
                  >认证信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>

    <!-- 认证信息	 -->
    <el-dialog title="认证信息" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="yesVisible" @close="yesVisible = false">
      <p style="font-size: 16px;margin-bottom: 0px;text-align: center;">用户手机号为<span class="red">{{statusRow.customerTelephone}}</span>的实名认证信息</p>
      <el-form id="userDialog" label-position="right" >
        <el-form-item label="姓名:" prop="audit" label-width="125px"  style="width:100%" >
            {{statusRow.fullname}}
        </el-form-item>
        <el-form-item label="身份证号:" prop="remark" label-width="125px" >
           {{statusRow.idcardNumber}}
        </el-form-item>
        <el-form-item label="身份证正面图:" prop="remark" label-width="125px" >
           <el-image :src="statusRow.idcardFrontPic" fit="fill" v-image-preview style="height:100px;cursor: pointer;"></el-image>
        </el-form-item>
        <el-form-item label="身份证反面图:" prop="remark" label-width="125px" >
         <el-image :src="statusRow.idcardBackPic" fit="fill" v-image-preview style="height:100px;cursor: pointer;"></el-image>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="yesVisible = false" size="small">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 审核	-->
    <el-dialog title="实名认证审核" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible" @close="auditVisible = false">
      <p style="font-size: 16px;margin-bottom: 0px;text-align: center;">用户名为<span class="red">{{userList.join(',')}}</span>的实名认证审核</p>
      <el-form id="userDialog" :model="user" label-position="right" :rules="rules" ref="user">
        <el-form-item label="审核:" prop="status" label-width="125px"  style="width:100%" >
            <el-radio-group v-model="user.status">
              <el-radio  label="1">通过</el-radio>
              <el-radio  label="2">不通过</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="remark" label-width="125px" >
          <el-input v-model="user.remark" type="textarea" autocomplete="off" :rows="4" placeholder="请填写审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="auditSubmit('user')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import { idcardList,idcardBatchAudit,getIdcardDetails,getTagList } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        applyTime:[],
        auditTime:[],
        searchForm: {
          customerCode:'',
          customerNickname:'',
          customerTelephone:'',
          tagIds:'',

          levelId:'',
          status:'',
          pageNum: 1,
          pageSize:20
        },
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'用户头像',
            value:'img'
        },{
            name:'用户名',
            value:'userName'
        },{
            name:'微信昵称',
            value:'userName'
        },{
            name:'微信昵称',
            value:'wxNick'
        },{
            name:'手机号',
            value:'phone'
        },{
            name:'真实姓名',
            value:'name'
        },{
            name:'身份证号',
            value:'idCard'
        },{
            name:'会员等级',
            value:'level'
        },{
            name:'标签',
            value:'label'
        },{
            name:'申请日期',
            value:'auditTime'
        },{
            name:'审核人(电话)',
            value:'auditPhone'
        },{
            name:'审核备注',
            value:'auditRemark'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[],
        total: 0,
        multipleSelection: '',
        dialogTitle: '',

        yesVisible:false,

        userList:[],
        auditVisible:false,
        user: {
          customerIdcardIds: '',
          status:'',
          remark:''
        },
        rules: {
          status: [{required: true, message: '请选择是否审核通过',trigger: 'blur'}]
        },

        levelList:[],
        statusList:[],
        tagList:[]
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.applyTime, 'applyStartTime', 'applyEndTime');
          data = this.addDateRange(this.searchForm, this.auditTime, 'checkStartTime', 'checkEndTime');
          this.loading = true;
          const result = await idcardList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
            
            //更新右上角未读消息个数
            this.$EventBus.$emit('getNoticeCountBus')
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect(){
        this.getCategoryDetails({categoryKey:'member_level_category'}).then(res=>{ this.levelList = res.data; })
        this.getSelectList('store_status').then(res=>{ this.statusList = res.data; })
        getTagList({typeId: 2}).then(res=>{ this.tagList = res.rows; })
      },
      /** 打开认证信息 **/
      handleAuthentication(row){
        getIdcardDetails({customerIdcardId:row.customerIdcardId}).then(res=>{ this.statusRow = res.data; })
        this.yesVisible = true;
      },
      /** 单个或批量审核 **/
      handleAudit(row){
        if(row){
          this.userList = [];
          this.userList.push(row.customerCode);
          this.user.customerIdcardIds  = row.customerIdcardId;
        }else{
          if(!this.multipleSelection.length){
            this.$modal.msgError("请先选中在批量审核");
            return;
          }else{
            this.userList = [];
            let ids = [];
            for(let i=0;i<this.multipleSelection.length;i++){
              this.userList.push(this.multipleSelection[i].customerCode)
              ids.push(this.multipleSelection[i].customerIdcardId)
            }
            this.user.customerIdcardIds  = ids.join(',');
          }
        }
        this.user.status = '';
        this.user.remark = '';
        this.auditVisible = true;
      },
      /** table 下拉框禁用 **/
      checkboxSelect (row, rowIndex) {
        if (row.status == 1) {
           return true
        }else{
           return false
        }
      },
      resetQuery(){
        this.applyTime = [];
        this.auditTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      /** 审核提交 **/
      auditSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            idcardBatchAudit(this.user).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.auditVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.btnLoading = false;
            });
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
